<template>
  <div class="main-container">
    <div
      :style="{ width: isCollapse === true ? '64px' : '200px' }"
      class="main-aside"
    >
      <el-menu
        :collapse="isCollapse"
        background-color="#304156"
        text-color="#fff"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">菜单1</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">菜单2</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">菜单3</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">菜单4</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main-content">
      <div class="content-header">
        <div class="navbar">
          <el-button
            @click="isCollapse = !isCollapse"
            :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
            type="text"
            style="font-size: 30px"
          >
          </el-button>
        </div>
        <div class="tags-view-container"></div>
      </div>
      <div class="content-view">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  mounted() {
    //session 存储
    // 注意点一：
    // 刷新页面不会清空存储
    // 只有在浏览器关闭的情况下才会清空所有存储

    // 注意点二
    // 引用类型需要经过json转换才能存进去
    sessionStorage.setItem("key1", "value");
    sessionStorage.setItem("key2", 100);

    sessionStorage.setItem("key3", JSON.stringify([1, 2, 3, 4, 5]));
    //获得存储数值
    console.log(sessionStorage.getItem("key3"));
    console.log(typeof sessionStorage.getItem("key3"));
    console.log(JSON.parse(sessionStorage.getItem("key3")));
    //删除存储
    sessionStorage.removeItem("key1");

    //  注意点
    //  存储的时间：session---关闭浏览器会清空
    //             local----永久存储（相当于浏览器访问的地址）
    //  localStorage
    localStorage.setItem("key1", "value");
    localStorage.setItem("key2", JSON.stringify([1, 2, 3, 4, 5]));
    
    console.log(localStorage.getItem("key3"));
    console.log(typeof localStorage.getItem("key3"));
    console.log(JSON.parse(localStorage.getItem("key3")));

    localStorage.removeItem("key1");

    this.getData();
  },
  methods: {
    //浏览器存储
    getData() {
      // axios.get('http://127.0.0.1:3000/api/test/crud/list',{
      //   params:{
      //     pageIndex:1,
      //     pageSize:10,
      //     questionContent:'',
      //     status:''
      //   }
      // }).then(res=>{
      //   console.log(res)
      // })

      // 方法二：
      axios({
        url: "http://127.0.0.1:3000/api/test/crud/list",
        method: "get",
        params: {
          pageIndex: 1,
          pageSize: 10,
          questionContent: "",
          status: "",
        },
        headers: {
          "Content-Type": "application/json;charset=utf-8",
          token: "this is my token",
        },
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scope lang="scss">
.main-container {
  display: flex;
  height: 100%;

  .main-aside {
    width: 200px;
    background-color: rgb(48, 65, 86);
  }

  .main-content {
    flex: 1;

    .content-header {
      width: 100%;
      height: 84px;
      border-bottom: 1px solid #ddd;
      box-shadow: 0 1px 2px #ddd;

      .navbar {
        height: 50px;
      }

      .tags-view-container {
        height: 34px;
      }
    }
  }

  .el-menu {
    border-right: solid 0px transparent;

    .el-submenu {
      .el-menu {
        .el-menu-item-group {
          background: #1f2d3d;

          ul {
            li.el-menu-item {
              background-color: #1f2d3d !important;
            }
          }
        }
      }
    }
  }
}
</style>